<template>
  <div>
    <el-row>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row>
      <el-form>
        <el-row>
          <el-col span="8">
            <el-form-item label="用户名" label-width="80px">
              <el-input/>
            </el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item label="用户名" label-width="80px">
              <el-input/>
            </el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item label="用户名" label-width="80px">
              <el-input/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="8">
            <el-form-item label="用户名" label-width="80px">
              <el-input/>
            </el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item label="用户名" label-width="80px">
              <el-input/>
            </el-form-item>
          </el-col>
          <el-col span="8">
            <el-form-item label="用户名" label-width="80px">
              <el-input/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>
    <el-row>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="用户名"
          prop="username"
          width="180">
        </el-table-column>
        <el-table-column
          label="姓名"
          prop="name"
          width="180">
        </el-table-column>
        <el-table-column
          label="地址"
          prop="address">
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: "user",
    data() {
      return {
        tableData:[]
      }
    },created() {
        var _this= this;

         this.axios({
           url:'http://test.org/user/list',
           method:'get',
           dataType:'json'
         }).then(function (res) {
             console.log(res.data)
            _this.tableData = res.data;
         })
    }
  }
</script>

<style scoped>
  .el-form {
    margin-top: 20px;
  }
</style>
